<template>
  <view class="test-container">
    <view class="header">
      <text class="title">系统功能测试</text>
    </view>
    
    <view class="test-section">
      <view class="section-title">用户模块测试</view>
      
      <view class="test-item">
        <text class="test-name">用户登录</text>
        <u-button type="primary" size="mini" @click="testLogin">测试</u-button>
      </view>
      
      <view class="test-item">
        <text class="test-name">用户注册</text>
        <u-button type="primary" size="mini" @click="testRegister">测试</u-button>
      </view>
    </view>
    
    <view class="test-section">
      <view class="section-title">设备模块测试</view>
      
      <view class="test-item">
        <text class="test-name">设备列表</text>
        <u-button type="primary" size="mini" @click="testDeviceList">测试</u-button>
      </view>
      
      <view class="test-item">
        <text class="test-name">设备控制</text>
        <u-button type="primary" size="mini" @click="testDeviceControl">测试</u-button>
      </view>
    </view>
    
    <view class="test-section">
      <view class="section-title">支付模块测试</view>
      
      <view class="test-item">
        <text class="test-name">创建订单</text>
        <u-button type="primary" size="mini" @click="testCreateOrder">测试</u-button>
      </view>
      
      <view class="test-item">
        <text class="test-name">支付订单</text>
        <u-button type="primary" size="mini" @click="testPayOrder">测试</u-button>
      </view>
    </view>
    
    <view class="test-section">
      <view class="section-title">订单模块测试</view>
      
      <view class="test-item">
        <text class="test-name">订单列表</text>
        <u-button type="primary" size="mini" @click="testOrderList">测试</u-button>
      </view>
    </view>
    
    <view class="test-result" v-if="testResult">
      <view class="result-title">测试结果</view>
      <view class="result-content">{{ testResult }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 测试结果
const testResult = ref('')

// 测试用户登录
const testLogin = () => {
  uni.navigateTo({ url: '/pages/login/login' })
  testResult.value = '跳转到登录页面'
}

// 测试用户注册
const testRegister = () => {
  uni.navigateTo({ url: '/pages/register/register' })
  testResult.value = '跳转到注册页面'
}

// 测试设备列表
const testDeviceList = () => {
  uni.navigateTo({ url: '/pages/device/list' })
  testResult.value = '跳转到设备列表页面'
}

// 测试设备控制
const testDeviceControl = () => {
  // 模拟传递设备ID
  uni.navigateTo({ url: '/pages/device/control?id=D001' })
  testResult.value = '跳转到设备控制页面'
}

// 测试创建订单
const testCreateOrder = () => {
  testResult.value = '创建订单功能测试中...'
  setTimeout(() => {
    testResult.value = '订单创建成功，订单号: O20231010001'
  }, 1000)
}

// 测试支付订单
const testPayOrder = () => {
  uni.navigateTo({ url: '/pages/payment/checkout?orderId=O20231010001' })
  testResult.value = '跳转到支付页面'
}

// 测试订单列表
const testOrderList = () => {
  uni.navigateTo({ url: '/pages/order/list' })
  testResult.value = '跳转到订单列表页面'
}
</script>

<style lang="scss" scoped>
.test-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  text-align: center;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
  }
}

.test-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.test-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  .test-name {
    font-size: 32rpx;
    color: #666;
  }
  
  &:last-child {
    border-bottom: none;
  }
}

.test-result {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.result-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.result-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}
</style>